import React, { useState, useEffect } from 'react';
import {
    Form,
    Select,
    InputNumber,
    Switch,
    Radio,
    Slider,
    Button,
    Upload,
    Rate,
    Checkbox,
    Row,
    Col,
    Input,
    Steps,
    Result
} from 'antd';
import ReactQuill from 'react-quill';


import './index.less';

const { Option } = Select;
const { Step } = Steps;
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { offset: 1, span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 11, span: 12 },
};
const modules = {
    toolbar: [
        [{ 'header': [1, 2, false] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
        ['link', 'image', 'code-block'],
        ['clean']
    ],
}

const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent', 'code', 'code-block',
    'link', 'image'
]

export default (props: any) => {
    const [form] = Form.useForm();
    const [current, setCurrent] = React.useState(0);
    const [textValue, setTextValue] = useState('');

    const next = () => {
        console.log(form.getFieldsValue())
        setCurrent(current + 1);
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const renderBasicForm = () => {
        return (
            <>
                <Form.Item name="name" label="任务名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="iteration" label="迭代次数" rules={[{ required: true, type: 'number', min: 0, max: 120 }]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item name="num" label="节点数" rules={[{ required: true, type: 'number', min: 0, max: 99 }]} >
                    <InputNumber />
                </Form.Item>
                <Form.Item name="numEachRound" label="每轮选择节点数" rules={[{ required: true, type: 'number', min: 0, max: 99 }]} >
                    <InputNumber />
                </Form.Item>
                <Form.Item name="algorithm" label="联邦学习算法" rules={[{ required: true }]}>
                    <Select
                        placeholder="选择一种聚合策略"
                        allowClear
                    >
                        <Option value="male">VB-FedAVG</Option>
                        <Option value="female">VSB-FedAVg</Option>
                        <Option value="other">FedAVG</Option>
                    </Select>
                </Form.Item>

                <Form.Item name="description" label="任务描述详情">
                    <ReactQuill
                        theme="snow"
                        value={textValue}
                        onChange={(value: any) => {
                            console.log(escape(value));
                            setTextValue(value);
                        }}
                        modules={modules}
                        formats={formats} />
                </Form.Item>
            </>
        )
    }

    const renderPeerForm = () => {
        return (
            <>
                <Form.Item name="taskID" label="本任务的ID为" rules={[{ required: true }]}>
                    <Input defaultValue={"9527"} disabled />
                </Form.Item>
                <Form.Item name="ip" label="服务端节点IP地址" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="host" label="服务端节点端口" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
            </>
        )
    }

    const renderResult = () => {
        return (
            <>
                <Result
                    status="success"
                    title="任务发布成功!"
                    subTitle={(
                        <div>
                            <p>TaskId: 9527</p>
                            <p>Smart Contract Address: 0xd9145CCE52D386f254917e481eB44e9943F39138</p>
                            <p>可能需要1~10分钟完成部署确认,请您耐心等待</p>
                        </div>
                    )}
                    extra={[
                        <Button type="primary" key="console">
                            任务看板
                        </Button>,
                    ]}
                />,
            </>
        )
    }
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };

    const steps = [
        {
            title: '基本信息',
            content: renderBasicForm(),
        },
        {
            title: '节点部署',
            content: renderPeerForm(),
        },
        {
            title: '发布结果',
            content: renderResult(),
        },
    ];

    useEffect(() => {
        form.setFieldsValue({
            taskID: 9527,
        });
    }, [])

    return (
        <>
            <Steps current={current}>
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>

            <div className='form-container'>
                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>

                    <div className="steps-content">
                        {steps[current].content}
                    </div>

                    <Form.Item {...tailLayout}>
                        {current < 1 && (
                            <Button type="primary" onClick={() => next()}>
                                下一步
                            </Button>
                        )}
                        {current === 1 && (
                            <Button type="primary" onClick={() => next()}>
                                节点检测
                            </Button>
                        )}
                        {current > 0 && current !== 2 && (
                            <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                                上一步
                            </Button>
                        )}
                    </Form.Item>
                </Form>
            </div>


        </>
    )
}